<template>
  <header >
    <div class="l-content">
      <el-button
        plain
        size="small"
        @click="handleMenu"
      >
      <el-icon size="20px"><Grid /></el-icon>
      </el-button>
      <el-breadcrumb s>
        <el-breadcrumb-item :to="{ path: '/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="current.path" v-if="current">{{
          current.label
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
       <div class="userCenter">
            <avatar></avatar>
          </div>
    </div>
  </header>
</template>
<script>
import Avatar from "@/components/myComponent/avatar.vue";
import { mapState } from "vuex";
export default {
   components: {
    Avatar,
  },
  data() {
    return {
      //后面还需要更改
      userImg: require('../assets/images/logo.png'),
      userName:"asd"
    };
  },

  methods: {
    handleMenu() {
      this.$store.commit("isCollapseMenu");
    },
    handleCommand(command) {
      if (command == "b") {
        window.sessionStorage.clear();
        this.$message.success("退出成功");
      }
    },
  },
  computed: {
    ...mapState({
      current: (state) => state.menu.currentMenu,
    }),
  },
};
</script>
<style  scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  background: rgb(255,255,255);
  box-shadow: 0px 0px 10px 0px #000;
}

.l-content {
  display: flex;
  align-items: center;
  margin-left: 20px;
  
}
.l-content .el-button {
  margin-right: 20px;
}
.m-content{
  width:300px;
  height: 40px;
  background: red;
}
.r-content .user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-breadcrumb__item .el-breadcrumb__inner {
  color: #666;
  font-weight: normal;
}
</style>
